<template>
  <div class="tradeFormComponent">
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="index" label="序号" align="center" width="60" />
      <el-table-column
        prop="name"
        label="作品名称"
        align="center"
        width="120"
      />
      <el-table-column
        prop="times"
        label="交易次数"
        align="center"
        width="100"
      />
      <el-table-column
        prop="initAmount"
        label="初始交易金额"
        align="center"
        width="120"
      >
        <template #default="scope"> ￥{{ scope.row.initAmount }} </template>
      </el-table-column>
      <el-table-column
        prop="newAmount"
        label="最新交易金额"
        align="center"
        width="120"
      >
        <template #default="scope"> ￥{{ scope.row.newAmount }} </template>
      </el-table-column>
      <el-table-column prop="timestamp" label="时间戳" align="center" />
      <el-table-column prop="id" label="作品ID" align="center" />
      <el-table-column prop="hash" label="最新区块Hash" align="center" />
    </el-table>
  </div>
</template>
<script>
export default {
  name: "tradeFormComponent",
  data() {
    return {
      tableData: [
        {
          index: 1,
          name: "第一桶金",
          times: 10,
          initAmount: 500,
          newAmount: 5000,
          timestamp: "2021-10-07  12:02:00",
          id: "0xfe201......201333",
          hash: "0xfe201......201333 ",
        },
        {
          index: 1,
          name: "第一桶金",
          times: 10,
          initAmount: 500,
          newAmount: 5000,
          timestamp: "2021-10-07  12:02:00",
          id: "0xfe201......201333",
          hash: "0xfe201......201333 ",
        },
        {
          index: 1,
          name: "第一桶金",
          times: 10,
          initAmount: 500,
          newAmount: 5000,
          timestamp: "2021-10-07  12:02:00",
          id: "0xfe201......201333",
          hash: "0xfe201......201333 ",
        },
        {
          index: 1,
          name: "第一桶金",
          times: 10,
          initAmount: 500,
          newAmount: 5000,
          timestamp: "2021-10-07  12:02:00",
          id: "0xfe201......201333",
          hash: "0xfe201......201333 ",
        },
        {
          index: 1,
          name: "第一桶金",
          times: 10,
          initAmount: 500,
          newAmount: 5000,
          timestamp: "2021-10-07  12:02:00",
          id: "0xfe201......201333",
          hash: "0xfe201......201333 ",
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
.tradeFormComponent {
  ::v-deep {
    .el-table .el-table__cell {
      padding: 18px 0;
    }
    .el-table__row {
      background: #fafafa;
    }
    .el-table__row.el-table__row--striped {
      background: #fff;
    }
    .el-table--striped
      .el-table__body
      tr.el-table__row--striped
      td.el-table__cell {
      background: #fff;
    }
    .el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {
      border-bottom: none;
    }
  }
}
</style>